<template>
  <span :class="classes" @click="handleClick">{{ date }}</span>
</template>
<script>
import Vue from "vue";
const isServer = Vue.prototype.$isServer;
import Time from "./time";
const prefixCls = "ivu-time";
export default {
  name: "Time",
  props: {
    time: {
      type: [Number, Date, String],
      required: true
    },
    type: {
      type: String,
      default: "relative"
    },
    hash: {
      type: String,
      default: ""
    },
    interval: {
      type: Number,
      default: 60
    }
  },
  data() {
    return {
      date: ""
    };
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-with-hash`]: this.hash
        }
      ];
    }
  },
  methods: {
    handleClick() {
      if (this.hash !== "") window.location.hash = this.hash;
    },
    setTime() {
      const type = typeof this.time;
      let time;
      if (type === "number") {
        const timestamp =
          this.time.toString().length > 10 ? this.time : this.time * 1000;
        time = new Date(timestamp).getTime();
      } else if (type === "object") {
        time = this.time.getTime();
      } else if (type === "string") {
        time = new Date(this.time).getTime();
      }
      if (this.type === "relative") {
        this.date = Time(time, this.t);
      } else {
        const date = new Date(this.time);
        const year = date.getFullYear();
        const month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        const hour =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        const minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        const second =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        if (this.type === "datetime") {
          this.date = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        } else if (this.type === "date") {
          this.date = `${year}-${month}-${day}`;
        }
      }
    }
  },
  mounted() {
    this.setTime();
    if (isServer) return;
    this.timer = setInterval(() => {
      this.setTime();
    }, 1000 * this.interval);
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  }
};
</script>
